<template>
  <div class="comment-manage">
    <!-- 搜索区域 -->
    <div class="search-area">
      <el-input
        v-model="keyword"
        placeholder="输入视频名称搜索"
        class="search-input"
      ></el-input>
      <el-button type="success" @click="search">查询</el-button>
    </div>

    <!-- 评论内容区域 -->
    <div class="content-area">
      <div class="header-row">
        <div class="header-left">评论信息</div>
        <div class="header-right">视频信息</div>
      </div>

      <!-- 评论列表 -->
      <div class="comment-list">
        <div
          v-for="(item, index) in commentList"
          :key="index"
          class="comment-item"
          :class="{ 'reply-item': item.isReply }"
        >
          <div class="comment-left">
            <div class="avatar">
              <img :src="item.avatar" alt="用户头像" />
            </div>
            <div class="comment-content">
              <div class="user-info">
                <span class="username">{{ item.username }}</span>
                <span class="reply-info" v-if="item.replyTo">
                  回复@ {{ item.replyTo }}
                </span>
              </div>
              <div class="comment-text">{{ item.content }}</div>
              <div class="comment-time">{{ item.createTime }}</div>
            </div>
          </div>
          <div class="comment-right">
            <div class="video-thumb">
              <img :src="item.videoThumb" alt="视频缩略图" />
              <div class="video-title">{{ item.videoTitle }}</div>
            </div>
            <div class="operations">
              <div class="operation-title">操作</div>
              <div class="operation-buttons">
                <el-button
                  type="warning"
                  size="small"
                  @click="highlightComment(item)"
                >
                  置顶
                </el-button>
              </div>
              <el-popconfirm
                title="确定删除该评论?"
                @confirm="deleteComment(item)"
              >
                <template #reference>
                  <el-button type="danger" size="small">删除</el-button>
                </template>
              </el-popconfirm>
            </div>
          </div>
        </div>
      </div>

      <!-- 分页器 -->
      <div class="pagination-container">
        <span class="total">共 {{ total }} 条</span>
        <el-pagination
          v-model:current-page="current"
          v-model:page-size="pageSize"
          :page-sizes="[15, 20, 30]"
          layout="sizes, prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { reqDelete, reqList } from '@/api/mis/comment'
import { ElMessage } from 'element-plus'

// 分页相关
const current = ref(1)
const pageSize = ref(15)
const total = ref(60)

// 搜索关键字
const keyword = ref('')

// 模拟评论数据
const commentList = ref([
  {
    id: 1,
    username: '刘德华',
    avatar: 'https://picsum.photos/200/200?random=150',
    content: '3333',
    createTime: '2025-01-22 17:43:27',
    videoTitle: '不装逼、装逼怪 权志龙经典小品',
    videoThumb: 'https://picsum.photos/200/200?random=105',
    isReply: true,
    replyTo: '刘德华的评论',
  },
  {
    id: 2,
    username: '刘德华',
    avatar:
      'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    content: '121212',
    createTime: '2025-01-22 17:43:24',
    videoTitle: '不装逼、装逼怪 权志龙经典小品',
    videoThumb: 'https://picsum.photos/200/200?random=106',
    isReply: false,
    replyTo: '',
  },
  {
    id: 3,
    username: '刘德华',
    avatar:
      'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    content: '55544',
    createTime: '2025-01-22 17:43:18',
    videoTitle: '不装逼、装逼怪 权志龙经典小品',
    videoThumb: 'https://picsum.photos/200/200?random=107',
    isReply: true,
    replyTo: '程序员老罗的评论',
  },
  {
    id: 4,
    username: '刘德华',
    avatar:
      'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    content: '5',
    createTime: '2025-01-22 17:48:11',
    videoTitle: '不装逼、装逼怪 权志龙经典小品',
    videoThumb: 'https://picsum.photos/200/200?random=108',
    isReply: false,
    replyTo: '',
  },
  {
    id: 5,
    username: '刘德华',
    avatar:
      'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    content: '23',
    createTime: '2025-01-22 17:43:02',
    videoTitle: '不装逼、装逼怪 权志龙经典小品',
    videoThumb: 'https://picsum.photos/200/200?random=109',
    isReply: false,
    replyTo: '',
  },
  {
    id: 6,
    username: '小米',
    avatar:
      'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    content: '666',
    createTime: '2024-10-31 21:06:47',
    videoTitle: '海底世界探秘',
    videoThumb: 'https://picsum.photos/200/200?random=110',
    isReply: false,
    replyTo: '',
  },
])

// 挂载完成后获取评论列表
onMounted(() => {
  // getAllComments()
})

// 获取所有评论的方法
const getAllComments = async () => {
  try {
    const params = {
      current: current.value,
      pageSize: pageSize.value,
      keyword: keyword.value,
    }
    const result = await reqList(params)
    if (result.code === '0') {
      // commentList.value = result.data.records || []
      // total.value = result.data.total || 0
    }
  } catch (error) {
    console.error('获取评论列表失败', error)
  }
}

// 当前页改变时的回调
const handleCurrentChange = () => {
  getAllComments()
}

// 每页数据条数变化时的回调
const handleSizeChange = () => {
  current.value = 1
  getAllComments()
}

// 搜索按钮的回调
const search = () => {
  current.value = 1
  getAllComments()
}

// 删除评论
const deleteComment = async (row: any) => {
  try {
    const result = await reqDelete({ id: row.id })
    if (result.code === '0') {
      ElMessage({ type: 'success', message: '删除成功！' })
      getAllComments()
    } else {
      ElMessage({ type: 'error', message: result.message || '删除失败！' })
    }
  } catch (error) {
    ElMessage({ type: 'error', message: '删除失败！' })
  }
}

// 置顶评论
const highlightComment = (row: any) => {
  ElMessage({ type: 'success', message: `评论"${row.content}"已置顶` })
}
</script>

<style scoped lang="scss">
.comment-manage {
  padding: 0 10px;

  .search-area {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .search-input {
      width: 300px;
      margin-right: 10px;
    }
  }

  .content-area {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

    .header-row {
      display: flex;
      justify-content: space-between;
      padding: 12px 20px;
      border-bottom: 1px solid #ebeef5;
      font-size: 14px;
      font-weight: bold;
      color: #606266;

      .header-left {
        width: 60%;
      }

      .header-right {
        width: 40%;
        text-align: center;
      }
    }

    .comment-list {
      padding: 0 10px;

      .comment-item {
        display: flex;
        padding: 15px 10px;
        border-bottom: 1px solid #ebeef5;

        &:hover {
          background-color: #f5f7fa;
        }

        .comment-left {
          flex: 0 0 60%;
          display: flex;

          .avatar {
            width: 40px;
            height: 40px;
            margin-right: 10px;

            img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }

          .comment-content {
            flex: 1;
            overflow: hidden;

            .user-info {
              display: flex;
              align-items: center;
              margin-bottom: 6px;

              .username {
                color: #409eff;
                font-weight: bold;
                font-size: 14px;
                margin-right: 8px;
              }

              .reply-info {
                color: #909399;
                font-size: 13px;
              }
            }

            .comment-text {
              margin-bottom: 8px;
              font-size: 14px;
              line-height: 1.4;
              color: #606266;
            }

            .comment-time {
              font-size: 12px;
              color: #909399;
            }
          }
        }

        .comment-right {
          flex: 0 0 40%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-left: 20px;

          .video-thumb {
            display: flex;
            align-items: center;

            img {
              width: 100px;
              height: 60px;
              object-fit: cover;
              border-radius: 4px;
              margin-right: 10px;
            }

            .video-title {
              font-size: 13px;
              color: #606266;
              width: 150px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
          }

          .operations {
            display: flex;
            flex-direction: column;
            gap: 8px;

            .operation-title {
              font-size: 13px;
              color: #606266;
              font-weight: bold;
              text-align: center;
            }

            .operation-buttons {
              display: flex;
              gap: 8px;
            }
          }
        }
      }
    }

    .pagination-container {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 15px 20px;

      .total {
        font-size: 13px;
        color: #606266;
        margin-right: 15px;
      }
    }
  }
}
</style>
